<template>
<div class="calc-row-box">
    <div class="calc-row-toolbar">
        <a-form-model style="padding: 10px 0;">
            <a-form-model-item :label="i18n('calcPosition', '统计位置')">
                <a-radio-group v-model="calcConfig.calcPosition">
                    <a-radio value="footer">{{i18n('fixedFooter', '固定表格底部')}}</a-radio>
                    <a-radio value="header">{{i18n('fixedHeader', '固定表格头部')}}</a-radio>
                </a-radio-group>
            </a-form-model-item>
        </a-form-model>
        <div class="calc-row-header">
            <a-button type="primary" @click="addList" style="margin-right: 10px;">{{ i18n('list.add', '新增') }}</a-button>
        </div>
    </div>
    <div class="calc-row-list">
        <div class="calc-old-data" v-if="isOldCalcData && (!calcConfig.list || calcConfig.list && !calcConfig.list.length)">
            <a-alert :message="i18n('notes', '注意')" type="warning">
                <template slot="description">
                    {{i18n('noteTips', ' 您当前列表有配置老版本的统计行数据，如果新增则会覆盖掉它')}}
                </template>
            </a-alert>
        </div>
        <a-collapse v-model="activeKey" style="margin-bottom: 10px" v-if="calcConfig.list && calcConfig.list.length">
            <template v-for="(row,index) of calcConfig.list">
                <a-collapse-panel :key="row.key" >
                    <template slot="extra">
                        <span class="panel-list-btn panel-list-del" @click.stop="removeList(calcConfig.list,index)"><a-icon type="delete" /></span>
                        <span class="panel-list-btn" @click.stop="move(calcConfig.list,index,'up')"><a-icon type="up-square" /></span>
                        <span class="panel-list-btn" @click.stop="move(calcConfig.list,index,'down')"><a-icon type="down-square" /></span>
                    </template>
                    <template slot="header">
                        <div class="panel-header" @click.stop>
                            <RxLangInput
                                v-model="row.title"
                                @change="setColTitle(row)"
                                :allowClear="true"
                                :placeholder="i18n('calcRowName', '请输入统计行名称')"
                                style="width: 200px"
                            ></RxLangInput>
                            <a-tooltip>
                                <template #title>
                                    <span>{{i18n('textCol', '文字所在列')}}</span>
                                </template>
                                <a-select v-model="row.colTitle" :options="colTitleOptions" style="width: 200px;margin-left: 10px" />
                            </a-tooltip>
                        </div>
                    </template>
                    <div class="panel-list" >
                        <div class="panel-list-row" v-if="!row.list.length">
                            <div class="panel-list-no-data">
                                <a-empty :description="''"></a-empty>
                                <a-button type="primary" @click="addRow(row)">{{i18n('list.add', '新增')}}</a-button>
                            </div>
                        </div>
                        <template v-else>
                            <div class="panel-list-row panel-list-header">
                                <div class="panel-item">{{i18n('calcField', '统计字段')}}</div>
                                <div class="panel-item">{{i18n('calcMethod', '计算方式')}}</div>
                                <div class="panel-item">{{i18n('calcArea', '计算区域')}}</div>
                                <div class="panel-item">{{i18n('format', '格式化数据')}}</div>
                                <div class="panel-item">{{i18n('min', '小数位')}}</div>
                                <div class="panel-item">{{i18n('showStyle', '显示样式')}}</div>
                            </div>
                            <div class="panel-list-row" v-for="(record,idx) of row.list">
                                <div class="panel-item-del panel-item-icon" @click="removeList(row.list,idx)"><a-icon type="minus-circle" /></div>
                                <div class="panel-item panel-item-first">
                                    <a-select v-model="record.field" :options="fieldOptionsFilter(row.list)"/>
                                </div>
                                <div class="panel-item">
                                    <a-select v-model="record.method" allowClear>
<!--                                        <a-select-option value="count">{{ i18n('sum', '求总数') }}</a-select-option>-->
                                        <a-select-option value="avg">{{ i18n('averaging', '求平均') }}</a-select-option>
                                        <a-select-option value="sum">{{ i18n('summation', '求总和') }}</a-select-option>
                                        <a-select-option value="max">{{ i18n('maxNum', '最大数') }}</a-select-option>
                                        <a-select-option value="min">{{ i18n('minNum', '最小数') }}</a-select-option>
                                    </a-select>
                                </div>
                                <div class="panel-item">
                                    <a-select v-model="record.area" allowClear defaultValue="page">
                                        <a-select-option value="page">{{i18n('pageData', '本页数据')}}</a-select-option>
                                        <a-select-option value="list">{{i18n('allData', '全部数据')}}</a-select-option>
                                    </a-select>
                                </div>
                                <div class="panel-item">
                                    <a-select v-model="record.format" allowClear>
                                        <a-select-option value="thousand">{{ i18n('thousandth', '千分位') }}</a-select-option>
                                        <a-select-option value="percentage">{{ i18n('percentage', '百分比') }}</a-select-option>
                                        <a-select-option value="chinese">{{ i18n('chnUpper', '数字/中文结合') }}</a-select-option>
                                    </a-select>
                                </div>
                                <div class="panel-item">
                                    <a-input-group compact style="display: flex;">
                                        <a-select v-model="record.decimal" allowClear style="flex: 1;">
                                            <a-select-option value="round">{{i18n('round', '取整')}}</a-select-option>
                                            <a-select-option value="keepDecimals">{{i18n('keepDecimal', '保留小数位')}}</a-select-option>
                                        </a-select>
                                        <a-tooltip  v-if="record.decimal === 'keepDecimals'">
                                            <template slot="title">
                                                <span>{{i18n('keepDecimalNumber', '保留几位小数?')}}</span>
                                            </template>
                                            <a-input-number v-model="record.decimalFormat" :min="0" style="flex: 1;"/>
                                        </a-tooltip>
                                    </a-input-group>
                                </div>
                                <div class="panel-item">
                                    <a-button :class="{'yes-set':isSet(record)}" @click="setRowConfig(record)">
                                       {{i18n('calcSet', '配置')}}
                                    </a-button>
                                    <a-icon class="yes-set-icon" v-if="isSet(record)" type="check-circle" />
                                </div>
                            </div>

                            <div class="panel-list-row panel-list-row-add">
                                <div class="panel-item-icon" @click="addRow(row)"><a-icon type="plus-circle" /></div>
                                <div class="panel-btn-add" @click="addRow(row)">{{ i18n('list.add', '新增') }}</div>
                            </div>
                        </template>
                    </div>
                </a-collapse-panel>
            </template>
        </a-collapse>
    </div>
</div>
</template>

<script>
/**
 * @Author : yangsanjin
 * @Date: 2024-10-24 10:44
 */
import RxLangInput from './RxLangInput.vue';
import { Util } from "@lowcode/jpaas-common-lib"
import calcStyleConfigDialog from "./calcStyleConfigDialog.vue";
import DefaultStandardFields from "./DefaultStandardFields.js";
import { cloneDeep } from 'lodash-es'
export default {
    name: "CalcRow",
    components:{
        RxLangInput
    },
    props:{
        value:{
            default:()=>({list:[]})
        },
        fieldOptions:{
            default:()=>[]
        },
        isOldCalcData:{},
        /*序号列*/
        isSeqCol:{},
        /*选择列*/
        isSelectCol:{},
        /*是否多选*/
        isMultiSelect:{}
    },
    data(){
        return {
            activeKey:[],
            calcConfig:{
                calcPosition:'footer',
                list:[
                    {
                        key:'k_01',
                        title:{},
                        list:[]
                    }
                ]
            }
        }
    },
    created(){
        if(this.value && this.value.list && this.value.list.length){
            this.activeKey = [this.value.list[0].key]
        }
    },
    computed:{
        colTitleOptions(){
            let o = [];
            if(this.isSeqCol && this.isSelectCol && this.isMultiSelect){
                o.push({value:'mergeCheckbox',label:this.i18n('merge', '选择列与序号列合并')})
            }else if(this.isSeqCol && this.isSelectCol){
                o.push({value:'mergeRadio',label:this.i18n('merge', '选择列与序号列合并')})
            }
            if(this.isSeqCol){
                o.push({value:'index',label:this.i18n('reqCol', '序号列')})
            }
            if(this.isSelectCol){
                o.push({value:this.isMultiSelect?'checkbox':'radio',label:this.i18n('selectCol', '选择列')})
            }
            return o
        }
    },
    methods:{
        move(list,idx,type){
            let cur = list[idx];
            if(type==='up' && idx > 0){
                list.splice(idx-1,0,cur)
                list.splice(idx + 1,1)
            }
            if(type==='down' && idx < list.length -1){
                list.splice(idx,1) ;
                list.splice(idx+1,0,cur);
            }
        },
        fieldOptionsFilter(list){
            let arr = cloneDeep(this.fieldOptions.filter(item=> !DefaultStandardFields.includes(item.value)))
            for (let item of arr){
                let has = list.some(row=>row.field === item.value)
                if(has){ item.disabled = true }
            }
            return arr
        },
        isSet(record){
            return record.styleConfig && Object.keys(record.styleConfig).length ;
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, "formBoListDialog", key);
        },
        addList(){
            let key ='k_'+ Math.random().toString(36).slice(-6);
            this.calcConfig.list.push({
                key,
                title:{},
                list:[]
            })
            if(!this.activeKey.includes(key)){
                this.activeKey.push(key)
            }
            this.$forceUpdate()
        },
        removeList(calcConfig,idx){
            calcConfig.splice(idx,1)
        },
        addRow(row){
            row.list.push({
                field:'',
                calc:'COUNT',
                format:'',
                decimal:'',
                decimalFormat:''
            })
        },
        setRowConfig(record){
            let { styleConfig } = record
            Util.open({
                curVm:this,
                component:calcStyleConfigDialog,
                widthHeight: ['600px', '440px'],
                title:this.i18n('showStyleConfig', '显示样式配置'),
                data:{
                    styleConfig
                }
            },(action,data)=>{
                if(action){
                    record.styleConfig = {...data};
                    this.$forceUpdate()
                }
            })
        },
        setColTitle(row){
            if(!row.colTitle){
                if(this.isSeqCol && this.isSelectCol){
                    row.colTitle = this.isMultiSelect?'mergeCheckbox':'mergeRadio';
                }else if(this.isSelectCol){
                    row.colTitle = this.isMultiSelect?'checkbox':'radio';
                }else {
                    row.colTitle = 'index'
                }
            }
        }
    },
    watch:{
        value:{
            handler(v){
                if(v && Object.keys(v).length){
                    this.calcConfig = v.list ? v : {...v,list:[]};
                }else {
                    this.calcConfig =  {...this.calcConfig};
                }
            },
            deep:true,
            immediate:true
        },
        calcConfig:{
            handler(v){
                this.$emit('input',v)
            },
            deep:true
        }
    }
}
</script>

<style scoped>
.calc-row-list{
    padding-bottom: 20px;
}
.yes-set-icon{
    margin-left: 10px;
}
.yes-set-icon,
.yes-set{
    color: #4d9eff;
    border-color: #4d9eff;
}
.calc-row-header{
    padding-bottom: 10px;
}
.panel-header{
    display: flex;
    align-items: center;
}
.panel-list-header{
    font-weight: bold;
}
.panel-list-row{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 0 10px;
    align-items: center;
    position: relative;
    padding: 6px 0 6px 24px;
    min-height: 20px;
}
.panel-list-row .panel-item-icon{
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -11px;
}
.panel-item-first{
    display: flex;
}
.panel-list-row-add{
    color: #1890ff;
}
.panel-list-row-add:has(.panel-btn-add:hover){
    color: #1677ff;
}
.panel-btn-add{
    width: fit-content;
    cursor: pointer;
}
.panel-list-no-data{
    grid-column-start: 1;
    grid-column-end: 7;
    text-align: center;
}
.panel-list-btn{
    display: inline-block;
    padding:0 4px;
}
.panel-list-btn:hover{
    color: #4d9eff;
}
.panel-item-del:hover,
.panel-list-del:hover{
    color: red;
    cursor: pointer;
}
.calc-row-box ::v-deep .ant-collapse-extra{
    margin-left: auto;
}
.calc-row-box ::v-deep .ant-collapse-header .ant-collapse-arrow{
    position: relative;
    transform:initial;
    top: initial;
    left: initial;
    vertical-align: middle;
    font-size: 14px;
    margin-right: 10px;
}
.calc-row-box ::v-deep .ant-collapse-header{
    display: flex;
    align-items: center;
    padding: 10px 16px;
}
.calc-row-box ::v-deep .ant-collapse-content-box{
    padding: 10px 16px;
}
.calc-row-box ::v-deep .ant-collapse{
    border-radius: 4px;
}
.calc-row-box ::v-deep .ant-collapse>.ant-collapse-item:last-child,
.calc-row-box ::v-deep .ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header{
    border-radius: 4px;

}
.calc-row-box ::v-deep .ant-empty-normal{
    margin-block: 8px;
}
.calc-row-box ::v-deep .ant-table-wrapper .ant-table-thead>tr>th,
.calc-row-box ::v-deep .ant-table-wrapper .ant-table-tbody>tr>td,
.calc-row-box ::v-deep .ant-table-wrapper tfoot>tr>th,
.calc-row-box ::v-deep .ant-table-wrapper tfoot>tr>td{
    padding: 8px 10px;
}
</style>